<template>
	<p><button @click="show = !show">显示/隐藏</button></p>
	<Transition
		@before-enter="onBeforeEnter"
	  @enter="onEnter"
	  @leave="onLeave"
		:css="false">
		<div v-show="show" class="gsap-box"></div>
	</Transition>
</template>

<script setup>
	import { ref } from "vue" 
	import gsap from 'gsap' 
	
	const show = ref(true) 
	
	// 在元素被插入到 DOM 之前被调用
	// 用这个来设置元素的 "enter-from" 状态
	function onBeforeEnter(el) {
		gsap.set(el, {
			scaleX: 0.25,
			scaleY: 0.25,
			opacity: 1
		})
	}
	
	// 在元素被插入到 DOM 之后的下一帧被调用
	// 用这个来开始进入动画
	function onEnter(el, done) {
	  gsap.to(el, {
			duration: 1,
			scaleX: 1,
			scaleY: 1,
			opacity: 1,
			ease: 'elastic.inOut(2.5, 1)',
			onComplete: done
		})
	}
	
	// 在离开过渡开始时调用
	// 用这个来开始离开动画
	function onLeave(el, done) {
	  gsap.to(el, {
	      duration: 0.7,
	      scaleX: 1,
	      scaleY: 1,
	      x: 300,
	      ease: 'elastic.inOut(2.5, 1)'
	    })
		gsap.to(el, {
			duration: 0.2,
			delay: 0.5,
			opacity: 0,
			onComplete: done
		})
	}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.gsap-box {
  background: #42b883;
	margin: 0 auto;
  margin-top: 20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
</style>
